<!-- templates/categories/productlist.html -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类别管理 - 商店进销存管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            info: '#86909C'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }

      .sidebar-item {
        @apply flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-all duration-200;
      }

      .sidebar-item.active {
        @apply bg-primary/10 text-primary border-l-4 border-primary;
      }

      .card-shadow {
        @apply shadow-md hover:shadow-lg transition-shadow duration-300;
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <i class="fa fa-cubes text-primary text-2xl"></i>
      <h1 class="text-xl font-bold text-gray-800">商店进销存管理系统</h1>
    </div>

    <div class="flex items-center space-x-6">
      <div class="relative">
        <input type="text" placeholder="搜索..."
               class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
      </div>

      <div class="flex items-center space-x-4">
        <button class="text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-bell-o text-xl"></i>
        </button>
        <button class="text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-cog text-xl"></i>
        </button>
        <div class="flex items-center space-x-2 cursor-pointer">
          <img src="https://picsum.photos/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
          <span class="text-gray-700">管理员</span>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="flex flex-1 overflow-hidden">
  <!-- 侧边栏导航 -->
  <aside class="w-64 bg-white shadow-md h-[calc(100vh-64px)] overflow-y-auto transition-all duration-300">
    <nav class="py-4">
      <div class="px-4 mb-4">
        <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">主菜单</h2>
      </div>

      <a href="../../index.html" class="sidebar-item" data-path="../../index.html">
        <i class="fa fa-tachometer w-5 h-5 mr-3"></i>
        <span>仪表盘</span>
      </a>

      <div class="px-4 mt-6 mb-2">
        <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">基础信息</h2>
      </div>

      <a href="../products/list.html" class="sidebar-item" data-path="../products/list.html">
        <i class="fa fa-shopping-bag w-5 h-5 mr-3"></i>
        <span>商品管理</span>
      </a>

      <a href="../categories/list.html" class="sidebar-item active" data-path="../categories/list.html">
        <i class="fa fa-th-large w-5 h-5 mr-3"></i>
        <span>类别管理</span>
      </a>

      <a href="../suppliers/list.html" class="sidebar-item">
        <i class="fa fa-truck w-5 h-5 mr-3"></i>
        <span>供应商管理</span>
      </a>

      <a href="../customers/list.html" class="sidebar-item">
        <i class="fa fa-users w-5 h-5 mr-3"></i>
        <span>客户管理</span>
      </a>

      <div class="px-4 mt-6 mb-2">
        <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">库存管理</h2>
      </div>

      <a href="../inventory/warehouse.html" class="sidebar-item">
        <i class="fa fa-archive w-5 h-5 mr-3"></i>
        <span>仓库管理</span>
      </a>

      <a href="../inventory/stock.html" class="sidebar-item">
        <i class="fa fa-list-alt w-5 h-5 mr-3"></i>
        <span>库存查询</span>
      </a>

      <a href="../inventory/instock.html" class="sidebar-item">
        <i class="fa fa-sign-in w-5 h-5 mr-3"></i>
        <span>入库管理</span>
      </a>

      <a href="../inventory/outstock.html" class="sidebar-item">
        <i class="fa fa-sign-out w-5 h-5 mr-3"></i>
        <span>出库管理</span>
      </a>

      <a href="../inventory/transfer.html" class="sidebar-item">
        <i class="fa fa-exchange w-5 h-5 mr-3"></i>
        <span>转仓管理</span>
      </a>

      <div class="px-4 mt-6 mb-2">
        <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">统计分析</h2>
      </div>

      <a href="../statistics/sales.html" class="sidebar-item">
        <i class="fa fa-line-chart w-5 h-5 mr-3"></i>
        <span>销售统计</span>
      </a>

      <a href="../statistics/inventory.html" class="sidebar-item">
        <i class="fa fa-pie-chart w-5 h-5 mr-3"></i>
        <span>库存分析</span>
      </a>

      <div class="px-4 mt-6 mb-2">
        <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">系统设置</h2>
      </div>

      <a href="../system/users.html" class="sidebar-item">
        <i class="fa fa-user-circle w-5 h-5 mr-3"></i>
        <span>用户管理</span>
      </a>

      <a href="../system/roles.html" class="sidebar-item">
        <i class="fa fa-shield w-5 h-5 mr-3"></i>
        <span>角色权限</span>
      </a>

      <a href="../system/logs.html" class="sidebar-item">
        <i class="fa fa-history w-5 h-5 mr-3"></i>
        <span>操作日志</span>
      </a>
    </nav>
  </aside>

  <!-- 主内容区域 -->
  <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
    <div class="container mx-auto">
      <!-- 页面标题 -->
      <div class="mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">类别管理</h2>
        <p class="text-gray-500 mt-1">管理商店的所有商品类别</p>
      </div>

      <!-- 操作按钮 -->
      <div class="mb-4 flex justify-between items-center">
        <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90">添加类别</button>
        <div class="flex space-x-2">
          <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-md hover:bg-gray-200">筛选</button>
          <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-md hover:bg-gray-200">导出</button>
        </div>
      </div>

      <!-- 类别列表 -->
      <div class="bg-white rounded-xl p-6 card-shadow">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
            <tr class="border-b border-gray-200">
              <th class="py-3 text-left text-sm font-medium text-gray-500">类别ID</th>
              <th class="py-3 text-left text-sm font-medium text-gray-500">类别名称</th>
              <th class="py-3 text-left text-sm font-medium text-gray-500">父类别</th>
              <th class="py-3 text-left text-sm font-medium text-gray-500">商品数量</th>
              <th class="py-3 text-left text-sm font-medium text-gray-500">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="border-b border-gray-100 hover:bg-gray-50">
              <td class="py-3 text-sm text-gray-600">001</td>
              <td class="py-3 text-sm text-gray-600">电子设备</td>
              <td class="py-3 text-sm text-gray-600">无</td>
              <td class="py-3 text-sm text-gray-600">120</td>
              <td class="py-3 text-sm text-gray-600">
                <button class="text-primary mr-2">编辑</button>
                <button class="text-danger">删除</button>
              </td>
            </tr>
            <tr class="border-b border-gray-100 hover:bg-gray-50">
              <td class="py-3 text-sm text-gray-600">002</td>
              <td class="py-3 text-sm text-gray-600">手机</td>
              <td class="py-3 text-sm text-gray-600">电子设备</td>
              <td class="py-3 text-sm text-gray-600">80</td>
              <td class="py-3 text-sm text-gray-600">
                <button class="text-primary mr-2">编辑</button>
                <button class="text-danger">删除</button>
              </td>
            </tr>
            <tr class="border-b border-gray-100 hover:bg-gray-50">
              <td class="py-3 text-sm text-gray-600">003</td>
              <td class="py-3 text-sm text-gray-600">电脑</td>
              <td class="py-3 text-sm text-gray-600">电子设备</td>
              <td class="py-3 text-sm text-gray-600">40</td>
              <td class="py-3 text-sm text-gray-600">
                <button class="text-primary mr-2">编辑</button>
                <button class="text-danger">删除</button>
              </td>
            </tr>
            <tr class="border-b border-gray-100 hover:bg-gray-50">
              <td class="py-3 text-sm text-gray-600">004</td>
              <td class="py-3 text-sm text-gray-600">服装</td>
              <td class="py-3 text-sm text-gray-600">无</td>
              <td class="py-3 text-sm text-gray-600">150</td>
              <td class="py-3 text-sm text-gray-600">
                <button class="text-primary mr-2">编辑</button>
                <button class="text-danger">删除</button>
              </td>
            </tr>
            <tr class="border-b border-gray-100 hover:bg-gray-50">
              <td class="py-3 text-sm text-gray-600">005</td>
              <td class="py-3 text-sm text-gray-600">食品</td>
              <td class="py-3 text-sm text-gray-600">无</td>
              <td class="py-3 text-sm text-gray-600">200</td>
              <td class="py-3 text-sm text-gray-600">
                <button class="text-primary mr-2">编辑</button>
                <button class="text-danger">删除</button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 类别树状图 -->
      <div class="mt-6 bg-white rounded-xl p-6 card-shadow">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">类别树状结构</h3>
        <div class="bg-gray-50 p-4 rounded-lg">
          <div class="ml-4 border-l-2 border-gray-200 pl-4 py-2">
            <div class="flex items-center">
              <i class="fa fa-folder text-warning mr-2"></i>
              <span class="font-medium">电子设备 (120)</span>
              <div class="ml-auto flex space-x-1">
                <button class="text-xs text-primary">编辑</button>
                <button class="text-xs text-danger">删除</button>
              </div>
            </div>
            <div class="ml-4 mt-2 border-l-2 border-gray-200 pl-4 py-2">
              <div class="flex items-center">
                <i class="fa fa-folder-o text-info mr-2"></i>
                <span>手机 (80)</span>
                <div class="ml-auto flex space-x-1">
                  <button class="text-xs text-primary">编辑</button>
                  <button class="text-xs text-danger">删除</button>
                </div>
              </div>
            </div>
            <div class="ml-4 mt-2 border-l-2 border-gray-200 pl-4 py-2">
              <div class="flex items-center">
                <i class="fa fa-folder-o text-info mr-2"></i>
                <span>电脑 (40)</span>
                <div class="ml-auto flex space-x-1">
                  <button class="text-xs text-primary">编辑</button>
                  <button class="text-xs text-danger">删除</button>
                </div>
              </div>
            </div>
          </div>
          <div class="ml-4 mt-2 border-l-2 border-gray-200 pl-4 py-2">
            <div class="flex items-center">
              <i class="fa fa-folder text-warning mr-2"></i>
              <span class="font-medium">服装 (150)</span>
              <div class="ml-auto flex space-x-1">
                <button class="text-xs text-primary">编辑</button>
                <button class="text-xs text-danger">删除</button>
              </div>
            </div>
          </div>
          <div class="ml-4 mt-2 border-l-2 border-gray-200 pl-4 py-2">
            <div class="flex items-center">
              <i class="fa fa-folder text-warning mr-2"></i>
              <span class="font-medium">食品 (200)</span>
              <div class="ml-auto flex space-x-1">
                <button class="text-xs text-primary">编辑</button>
                <button class="text-xs text-danger">删除</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<!-- 页脚 -->
<footer class="bg-white py-4 border-t border-gray-200">
  <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
    <p>© 2025 商店进销存管理系统 - 版权所有</p>
  </div>
</footer>

<!-- JavaScript -->
<script>
  // 侧边栏切换（保持原有功能）
  const toggleSidebar = () => {
    const sidebar = document.querySelector('aside');
    sidebar.classList.toggle('w-64');
    sidebar.classList.toggle('w-20');

    const sidebarTexts = document.querySelectorAll('aside span');
    sidebarTexts.forEach(text => {
      text.classList.toggle('hidden');
    });
  };

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', () => {
    initSidebarNavigation();
    setCurrentPageActive();
  });

  /**
   * 初始化侧边栏导航
   */
  const initSidebarNavigation = () => {
    const sidebarItems = document.querySelectorAll('.sidebar-item');

    sidebarItems.forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();

        const path = item.getAttribute('data-path');
        if (!path) return;

        // 更新激活状态
        updateActiveItem(item);

        // 显示加载指示器
        showPageLoader();

        // 使用平滑过渡加载新页面
        setTimeout(() => {
          window.location.href = path;
        }, 300); // 动画持续时间
      });
    });
  };

  /**
   * 更新激活菜单项
   */
  const updateActiveItem = (activeItem) => {
    document.querySelectorAll('.sidebar-item').forEach(item => {
      item.classList.remove('active');
    });
    activeItem.classList.add('active');
  };

  /**
   * 设置当前页面菜单项为激活状态
   */
  const setCurrentPageActive = () => {
    const currentPath = window.location.pathname;
    const sidebarItems = document.querySelectorAll('.sidebar-item');

    sidebarItems.forEach(item => {
      const itemPath = item.getAttribute('data-path');
      if (itemPath && currentPath.endsWith(itemPath)) {
        updateActiveItem(item);
        return;
      }
    });
  };

  /**
   * 显示页面加载指示器
   */
  const showPageLoader = () => {
    const mainContent = document.querySelector('main');

    // 创建加载指示器元素
    const loader = document.createElement('div');
    loader.className = 'fixed inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50 transition-opacity duration-300';
    loader.innerHTML = `
            <div class="text-center">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                <p class="mt-4 text-gray-600">加载中...</p>
            </div>
        `;

    // 添加到页面
    document.body.appendChild(loader);

    // 300ms后移除（与导航延迟匹配）
    setTimeout(() => {
      loader.classList.add('opacity-0');
      setTimeout(() => {
        document.body.removeChild(loader);
      }, 300);
    }, 300);
  };
</script>
</body>

</html>